<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>太极图</title>  
<style>  
    .taiji {  
        position: relative;  
        width: 300px;  
        height: 300px;  
        border-radius: 50%;  
        background: #fff; /* 黑色背景 */ 
		border: 1px solid;
        overflow: hidden; /* 隐藏超出容器的部分 */  
		margin: 200px auto;
		animation:xuanzhuan 3s infinite linear;
    }  
  
    .taiji:before {  
		content: "";  
        position: absolute;  
		z-index: 2;
        top: 0;  
        left: 75px;  
        width: 50%;  
        height: 50%;  
		border-width: 0 1px 0 0px;
        border-radius: 50%; /* 左侧半圆 */  
		background-color: #000;
    }  
  
    .taiji:after {  
        content: "";  
        position: absolute;  
        bottom: 0;  
        left: 75px;  
        width: 150px;  
        height: 150px;  
		border: 1px solid;
		border-width: 0 0 0 1px;
        border-radius: 50%; /* 左侧半圆 */  
		background-color: #fff;
    }
	.yang,.yin{
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}  
	.yang{
		left: 40%;
    	top: 15%;
		background-color: #fff;
		z-index: 2;
	}
	.yin{
		bottom: 16%;
    	left: 40%;
		background-color: #000;
		z-index: 2;
	}
	.left{
		position: absolute;
		width: 150px;
		height: 100%;
		background-color: yellow;
		top: 0;
		left: 0;
		border-radius: 50% 0 0 50%;
		background-color: #000;
	}
	.right{
		position: absolute;
		width: 150px;
		height: 100%;
		right: 0;
		top: 0;
		border-radius: 0 50% 50% 0;
		background-color: #fff;
	}
	@keyframes xuanzhuan{
		0%{transform: rotate(0deg);}
		100%{transform: rotate(360deg);}
	}
</style>  
</head>  
<body>  
  
<div class="taiji">
	<div class="yang"></div>
	<div class="yin"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>  
  
</body>  
</html>